<template>
  <view class="edit-container">
    <!-- 头像区 -->
    <view class="avatar-section">
      <image class="avatar-img" :src="avatarUrl" mode="aspectFill" />
      <view class="avatar-edit" @click="onEditAvatar">
        <!-- <image src="../../static/MyImage/edit.png" class="icon-edit" /> -->
      </view>
    </view>
    <!-- 详细地址 -->
    <view class="info-block">
      <view class="info-label">详细地址</view>
      <input
        class="info-input"
        v-model="address"
        placeholder="请输入详细地址"
        maxlength="50"
      />
    </view>
    <view class="divider"></view>
    <!-- 出生日期和性别 -->
    <view class="row-flex">
      <view class="info-label">出生日期</view>
      <view class="info-label gender-label">性别</view>
    </view>
    <view class="row-flex">
      <view class="birth-value" @click="openDatePicker">
        {{ birthday || "请选择日期" }}
      </view>
      <view class="gender-group">
        <view
          class="gender-btn"
          :class="{ active: gender === '男' }"
          @click="setGender('男')"
          >男</view
        >
        <view
          class="gender-btn"
          :class="{ active: gender === '女' }"
          @click="setGender('女')"
          >女</view
        >
      </view>
    </view>
    <!-- 日期选择器弹窗 -->
    <uni-datetime-picker
      v-if="showDatePicker"
      type="date"
      :value="birthday"
      @change="onDateChange"
      @close="showDatePicker = false"
    />
    <!-- 姓名 -->
    <view class="info-block">
      <view class="info-label">姓名</view>
      <input
        class="info-input"
        v-model="name"
        placeholder="请输入姓名"
        maxlength="20"
      />
      <view class="info-tip">（姓名和身份证号手机号性别无法修改）</view>
    </view>
    <!-- 身份证 -->
    <view class="info-block">
      <view class="info-label">居民身份证</view>
      <input
        class="info-input"
        v-model="idCard"
        placeholder="请输入身份证号"
        maxlength="18"
      />
    </view>
    <!-- 手机号 -->
    <view class="info-block">
      <view class="info-label">手机号</view>
      <input
        class="info-input"
        v-model="phone"
        placeholder="请输入手机号"
        maxlength="11"
      />
    </view>
    <!-- 确认修改按钮 -->
    <button class="submit-btn" @click="onSubmit">确认修改</button>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { editMy } from '@/https/editmy'
import type { EditMyItem, EditMy } from '@/types/editmy'

const gender = ref("男");
const birthday = ref("1996-11-02");
const showDatePicker = ref(false);
const name = ref("显示姓名");
const idCard = ref("450000000000000000");
const phone = ref("19166666666");

// 头像（params）
const avatarUrl = ref("https://img.yzcdn.cn/vant/cat.jpeg"); // 替换为你的头像图片
// 详细地址（params）
const address = ref("广西东省深圳市龙华区xxxx");


const onSubmit = async () => {
  const params: EditMyItem = {
    avatar: avatarUrl.value,
    address: address.value,
  }
  console.log(params);
  try {
    const res = await editMy(params)
    console.log(res)
  } catch (error) {
    console.error(error)
}
  uni.showToast({ title: "点击确认修改", icon: "none" });
  setTimeout(() => {
    uni.redirectTo({ url: "/pages/profile/profile" });
  }, 1750);
}

function setGender(val: string) {
  gender.value = val;
  uni.showToast({ title: "切换性别: " + val, icon: "none" });
}
function onEditAvatar() {
  uni.showToast({ title: "点击编辑头像", icon: "none" });
}

function onBack() {
  uni.navigateBack();
}
function openDatePicker() {
  showDatePicker.value = true;
}
function onDateChange(e: any) {
  birthday.value = e.detail.value || e;
  showDatePicker.value = false;
}

</script>

<style scoped>
.edit-container {
  min-height: 100vh;
  background: #fbfffd;
  box-shadow: 0 0 16px #e6f9f0;
  padding-bottom: 32px;
}
.header-bar {
  display: flex;
  align-items: center;
  height: 64px;
  background: #fff;
  box-shadow: 0 4px 12px #16e06e22;
  position: relative;
  padding-left: 16px;
  border-bottom: 4px solid #16e06e22;
}
.back-arrow {
  font-size: 28px;
  color: #16e06e;
  font-weight: bold;
  cursor: pointer;
  margin-right: 12px;
}
.header-title {
  color: #16e06e;
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 2px;
}
.avatar-section {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 18px;
  margin-bottom: 18px;
  position: relative;
}
.avatar-img {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fff;
  box-shadow: 0 2px 12px #16e06e22;
}
.avatar-edit {
  position: absolute;
  right: calc(50% - 55px);
  bottom: 8px;
  background: #16e06e;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #fff;
  cursor: pointer;
}
.icon-edit {
  width: 18px;
  height: 18px;
}
.info-block {
  margin: 18px 32px 0 32px;
}
.info-label {
  font-size: 20px;
  font-weight: bold;
  color: #444;
  margin-bottom: 6px;
}
.info-input {
  width: 100%;
  font-size: 17px;
  color: #16e06e;
  border: none;
  border-bottom: 1.5px solid #16e06e22;
  background: transparent;
  padding: 6px 0;
  margin-bottom: 2px;
}
.info-value {
  font-size: 17px;
  color: #888;
  margin-bottom: 2px;
}
.info-tip {
  font-size: 13px;
  color: #bbb;
  margin-left: 4px;
}
.divider {
  height: 2px;
  background: #16e06e22;
  margin: 18px 32px;
  border-radius: 2px;
}
.row-flex {
  display: flex;
  align-items: center;
  margin: 0 32px;
  margin-bottom: 8px;
}
.gender-label {
  margin-left: 60px;
}
.birth-value {
  flex: 1;
  font-size: 20px;
  color: #444;
  font-weight: bold;
  cursor: pointer;
}
.gender-group {
  display: flex;
  margin-left: 16px;
}
.gender-btn {
  width: 54px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border: 2px solid #16e06e;
  border-radius: 8px;
  color: #16e06e;
  font-weight: bold;
  margin-right: 8px;
  background: #fff;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  font-size: 17px;
}
.gender-btn.active {
  background: #16e06e;
  color: #fff;
}
.submit-btn {
  display: block;
  width: 90%;
  max-width: 420px;
  margin: 36px auto 0 auto;
  height: 54px;
  background: #16e06e;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  border: none;
  border-radius: 16px;
  box-shadow: 0 4px 16px #16e06e33;
  letter-spacing: 2px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>